<template>
    <div>
        <ul>
            <li v-for="msg in listMsg" :key="msg.id">
                <RouterLink :to="{
                name: 'messageDetils',
                query: { id: msg.id, title: msg.title }
            }">{{ msg.id }} - {{ msg.title }}
                </RouterLink>
            </li>
        </ul>
        <hr />
        <RouterView></RouterView>
    </div>
</template>
<script>
import { RouterLink, RouterView } from 'vue-router';

export default {
    name: 'Message',
    data() {
        return {
            listMsg: [
                { id: '001', title: '科技' },
                { id: '002', title: '汽车' },
                { id: '003', title: '医疗' },
            ]
        }
    },
}
</script>